<template>
  <div>
    <Table :data="listData" type="index" :columns="listColumns" stripe></Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page :total="total" :current="current" @on-change="changePage"></Page>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "role",
    data() {
      return {
        limit: 0,
        page: 0,
        current: 1,
        total: 100,
        listData: [],
        listColumns: [
          {
            type: 'index',
            width: 60,
            align: 'center'
          },
          {
            title: '名称',
            key: 'roleName'
          },
          {
            title: "描述",
            key: "description",
          },
          {
            title: "最新修改",
            key: "updatedOn",
            render: (h, params) => {
              return h('div', new Date(params.row.updatedOn * 1000).toLocaleString())
            }
          },
          {
            title: "操作",
            key: "action",
            align: "center",
            render: (h, params) => {
              return h("div", [
                h("Button",
                  {
                    props: {
                      type: "success",
                      size: "small",
                      icon: "person-stalker"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.edit(params.row.id);
                      }
                    }
                  },
                  "权限"
                ),
                h("Button",
                  {
                    props: {
                      type: "primary",
                      size: "small",
                      icon: "edit"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.edit(params.row.id);
                      }
                    }
                  },
                  "修改"
                ),
                h("Button",
                  {
                    props: {
                      type: "error",
                      size: "small",
                      icon: "trash-a"
                    },
                    on: {
                      click: () => {
                        this.remove(params.row.id);
                      }
                    }
                  },
                  "删除"
                )
              ]);
            }
          }
        ]
      };
    },
    methods: {
      init() {
        this.limit = 10;
        this.page = 0;
        this.current = 1;
        this.total = 100;
        this.mockListData(1);
      },
      mockListData(init) {
        console.log(this.page + '===' + this.limit)
        this.$axios({
          method: 'get',
          url: '/api/role'
        }).then((res) => {
          console.log(res.data);
          this.total = res.data.request.total;
          console.log(this.total);
          this.listData = res.data.result;
          this.$Notice.success({
            title: '加载成功!'
          });
        }).catch((error) => {
          this.$Notice.error({
            title: '加载失败!'
          });
          console.log(error);
        });
      },
      show(itemId) {
        this.$router.push({
          path: `concert/${itemId}`
        });
      },
      remove(item) {
        console.log(item)
      },
      changePage(index) {
        // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
        this.page = index;
        this.mockListData(1);
      }
    },
    mounted() {
      this.init();
    }
  }
</script>

<style scoped>

</style>
